<template>
  <div>
    <!-- 导航 -->
    <div>
      <van-nav-bar
        left-text="返回"
        title="我的订单"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <!-- 标签 -->
    <van-tabs v-model="active">
      <!-- 全部订单 -->
      <van-tab title="全部" class="quanbu">
        <div v-for="v in other_data" :key="v.tid">
          <van-card class="subtitle">
            <span slot="title" style="margin-right: 10px">{{ v.title }} </span>
            <div class="price" slot="price">￥{{ v.price }}</div>
            <span slot="price">{{ v.getDate }} </span>
            <span slot="price" class="count"> 有效 : {{ v.c_count }}份</span>
            <div slot="price">凭[身份证或二维码]检票进入园区</div>
            <div slot="num" class="total">￥{{ v.total }}</div>
            <template #tags>
              <van-tag class="subIco" plain type="danger">已出票</van-tag>
            </template>
            <template #footer>
              <van-button size="small" class="del" @click="del(v)"
                >删除</van-button
              >
            </template>
            <van-divider>好像没有了！</van-divider>
          </van-card>
        </div>
      </van-tab>

      <van-tab title="待出行">
        <van-divider v-if="orderStatus">快去添加吧</van-divider>
        <div v-else>
          <div v-for="v in other_data" :key="v.oid">
            <van-card class="subtitle">
              <span slot="title" style="margin-right: 10px"
                >{{ v.title }}
              </span>
              <div class="price" slot="price">￥{{ v.price }}</div>
              <span slot="price">{{ v.getDate }} </span>
              <span slot="price" class="count"> 有效 : {{ v.c_count }}份</span>
              <div slot="price">凭[身份证或二维码]检票进入园区</div>
              <div slot="num" class="total">￥{{ v.total }}</div>
              <template #tags>
                <van-tag class="subIco" plain type="danger">已出票</van-tag>
              </template>
              <template #footer>
                <van-button size="small" class="del" @click="del(v)"
                  >删除</van-button
                >
              </template>
              <van-divider>好像没有了！</van-divider>
            </van-card>
          </div>
        </div>
      </van-tab>

      <van-tab title="待点评">
        <van-divider v-if="orderStatus">暂无待评价景点</van-divider>
        <div v-else>
          <div v-for="v in other_data" :key="v.tid">
            <van-card desc="快来评分吧" :title="v.title">
              <template #footer>
                <van-cell is-link @click="showPopup">评价</van-cell>
              </template>
            </van-card>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { GetSearchTipsListData } from "@/request/api";

export default {
  computed: {
    ...mapState(["imgbase"]),
  },
  data() {
    return {
      active: 0,
      data: [],
      other_data: [], //待出行的数据
      value: 0,
      show: false,
      orderStatus: "", //初始的订单状态
      searchTipsListData: "",
      title: "",
    };
  },

  mounted() {
    // 页面加载完毕后，发请求，获取全部订单数据
    let uname = this.$store.state.uname;
    console.log(uname);
    // let price = this.$store.state.BuyPrice;
    // console.log("用户是", name);
    // console.log("价格是", price);
    this.axios
      .get(`http://xh.tmooc.top:6060/order/list?uname=${uname}`)
      .then((res) => {
        console.log("订单数据", res);
        this.other_data = res.data.data;
      });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    showPopup() {
      this.show = true;
    },
    // 删除订单
    del(v) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确认删除订单吗",
        })
        .then(() => {
          let params = v.oid;
          this.axios
            .delete(`http://xh.tmooc.top:6060/order/${params} `)
            .then((res) => {
              // console.log("shanchu", res);
            });
          // 刷新页面
          setTimeout(() => {
            this.$router.go(0);
          }, 2000);
          Toast.success("删除成功");
        })
        .catch((err) => {
          // console.log(err);
        });
    },
    // 待出行 待点评页面发请求
    showPopup() {
      this.$router.push("/estimate");
    },
  },
};
</script>

<style>
.van-tabs__line {
  background-color: #1989fa !important;
}
</style>

<style lang="scss" scoped>
::v-deep .van-nav-bar__content {
  background-color: rgb(191, 218, 241) !important;
}

::v-deep .van-card__thumb {
  margin-right: 15px;
}
.subtitle {
  background-color: rgb(191, 218, 241);
  margin: 5px;
  line-height: 1.5em;
  border-radius: 8px;
  position: relative;
  span:first-child {
    font-size: 16px;
  }
  .price {
    padding: 5px 0;
    font-size: 14px;
  }
  .count {
    font-size: 14px;
  }
  .subIco {
    position: absolute;
    bottom: -40px;
    left: -10px;
    padding: 3px 10px;
    border-radius: 10px;
  }
  .total {
    color: red;
    margin-top: 32px;
    font-size: 16px;
  }
  .del {
    border-radius: 6px;
    border-color: rgb(0, 94, 255);
    color: #36d;
  }
}
.subIco {
  margin: 10px;
}
.van-popup {
  > div:first-child {
    font-size: 18px;
    font-weight: bold;
    padding: 0px 10px;
    color: #000;
    border-radius: 8px;
  }
  .xinxi {
    margin-top: 10px;
    margin-bottom: 10px;
    display: flex;
  }
  .xinxi > img {
    height: 70px;
    width: 70px;
  }
  .tijiao {
    display: flex;
  }
  .tijiao > button {
    margin-left: 130px;
  }
}
</style>
